{{ extend './common/layout.html' }}

{{ block 'main' }}

<div class="login-body">
  <div class="login-container">
    <h4 class="title">黑马程序员 - 博客管理员登录</h4>
    <div class="login">
      <form id="form" action="/admin/login" method="post">
        <div class="form-group">
          <label>邮件</label>
          <input type="email" class="form-control" placeholder="请输入邮件地址" name="email">
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" class="form-control" placeholder="请输入密码" name="password">
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>
    <div class="tips"></div>
  </div>
</div>

{{ /block }}

{{ block 'js' }}

<script>
  $(() => {

    const $form = $('#form')

    $form.submit(() => {

      const arr = $form.serializeArray()

      const obj = arr.reduce((obj, v) => {
        obj[v.name] = v.value
        return obj
      }, {})

      if (obj.email.trim() === '' || obj.password.trim() === '') {
        alert('请输入邮箱或密码')
        return false
      }

      console.log('表单验证无误，可以提交表单了')

    })

  })
</script>

{{ /block }}